<template>
  <div class="container">
    <el-card class="box-card" style="width: 380px">
      <div slot="header" class="clearfix myheader" style="padding: 5px auto">
        <div class="title" style="text-align: center; font-size: 20px; color: #E6A23C; font-weight: 700">注册</div>
      </div>
    <section>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <div class="text item demo-input-size top-distance-small">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"
           size="large"
           maxlength="18"
           placeholder="请输入用戶名"
           prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        </div>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password"
          placeholder="请输入密码"
          show-password
          maxlength="50" show-word-limit 
          prefix-icon="el-icon-unlock"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="cpwd">
          <el-input v-model="ruleForm.cpwd" type="password"
          placeholder="请再次输入密码"
          show-password
          maxlength="50" show-word-limit 
          prefix-icon="el-icon-unlock"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"
          placeholder="请输入邮箱"
          maxlength="50" show-word-limit 
          prefix-icon="el-icon-message"></el-input>
        </el-form-item>
        <el-form-item>
        <div style="margin-left:-80px">
          <el-button class="loginStyle"
            type="primary"
            @click="register">
            注册
          </el-button>
          </div>
          <div class="error">{{ error }}</div>
        </el-form-item>
      </el-form>
    </section>
    </el-card>
  </div>
</template>

<script>
import md5 from 'md5'
export default {
  name: "Register",
  layout: "blank",
  data() {
    return {
      statusMsg: '',
      error: '',
      ruleForm: {
        name: '',
        pwd: '',
        cpwd: ''
      },
      rules: {
        name: [{
          required: true,
          type: 'string',
          message: '请输入用户名',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          type: 'string',
          message: '请输入邮箱',
          trigger: 'blur'
        },{
          validator: (rule, value, callback) => {
            var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(!reg.test(value)){
              callback(new Error('请输入有效的邮箱'));
            }else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        cpwd: [{
          required: true,
          message: '确认密码有误，请重新输入',
          trigger: 'blur'
        }, {
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.pwd) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    sendMsg() {
      const self = this
      let namePass
      if (self.timerid) {
        return false
      }
      this.$refs.ruleForm.validateField('name', valid => {
        namePass = valid
      })
      self.statusMsg = ''
      if (namePass) {
        return false
      }
      
    },
    register() {
      let self = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          self.axios({
            url: '/register',   
            method: 'post',      
            data: {              
            username: self.ruleForm.name,
            password: md5(self.ruleForm.pwd),
            email:self.ruleForm.email
            }
        }).then(res=>{  
            let data = res.data;       
            if(data.success) {
                self.$message({
                  message: '注册成功',
                  type: 'success'
                });
                self.$router.push({path: '/login'});  //跳转到登录页
            }else {
                if(data.error != null) {
                  self.$message.error(data.error);
                }else if(data.message != null) {
                  self.$message.error(data.message);
                }
                
            }
        })
        }
      })
    }
  }
}

</script>

<style >
.container {
    width: 400px;
    text-align:center;
    margin:15% auto;
  }

 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 20px;
  }

  .password-item {
    margin-bottom: 10px !important;
  }

  .regist {
    right: 27%
  }

  .forget {
    left: 28%
  }

  .loginStyle {
    width: 200px;
    margin-top: 20px !important;
  }

  .top-distance-medium {
    margin-top: 40px !important;
  }

  .top-distance-small {
    margin-top: 10px !important;
  }

  .otherWay {
    width: auto;
    height: auto;
  }

  .otherWay:hover {
    cursor: pointer;
  }

  .otherText {
    height: 13px !important;
    font-size: 12px !important;
    color: #b5b5b5 !important;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

</style>
